{% extends "template/common/base.html" %}
{% block menu %}
<li><a href="/home">首页</a></li>
<li><a href="/movie">电影</a></li>
<li class="active"><a href="/score">评分</a></li>
<li><a href="/word">词云</a></li>
<li><a href="/team">团队</a></li>
{% endblock %}
{% block head %}
<!-- ======= Our Team Section ======= -->
<section id="team" class="team">
  <div class="container">
    <div class="section-title">
      <h2>豆瓣电影Top250评分分布</h2>
      <p>通过图表来进行直观展示豆瓣电影Top250评分分布</p>
    </div>
    <!-- ======= Counts Section ======= -->
    <section class="counts section-bg">
      <div class="container">
        <div id="main" style="width: 600px;height:400px;"></div>
      </div>
    </section><!-- End Counts Section -->
  </div>
</section><!-- End Our Team Section -->
{% endblock %}
{% block script %}
<script src="static/assets/js/echarts.min.js"></script>
<script type="text/javascript">
  var dom = document.getElementById("main");
  var myChart = echarts.init(dom);
  var app = {};
  option = null;
  option = {
      color:['#3398DB'],
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
      },
      grid: {
          left: '3%',
          right:'4%',
          bottom:'3%',
          containLabel:true
      },
      xAxis: {
          type: 'category',
          data: {{ score|tojson }},
          <!--['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','999']-->
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: {{ number }},
              <!--[120, 20, 150, 80, 70, 110, 130,200],-->
          barWidth:'60%',
          type:'bar'
      }]
  };
  ;
  if (option && typeof option === "object") {
      myChart.setOption(option, true);
  }
</script>
{% endblock %}